<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i> 新增门店</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
          <div style="max-width:1000px;padding:10px 0 30px 0px">
              <el-alert
                  title="建议上传的图片压缩之后再上传，便于小程序请求图片资源加载速度快"
                  type="warning"
                  show-icon>
              </el-alert>
          </div>
            <el-form ref="form" :model="store" label-width="150px" @submit.native.prevent>
                <el-form-item label="门店名称">
                    <el-input v-model="store.name" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="门店电话">
                    <el-input v-model="store.telephone" style="width:400px" ></el-input>
                </el-form-item>
                <el-form-item label="门店主图">
                  <span style="color:red;padding-left:10px;">最多上传五张，(比例规范 高：宽)建议上传的轮播图比例是15：23 示例490X750 </span>
                    <div class="sola-upload clearfix">
                        <div class="sola-left clearfix" v-show="bannerPicture.length>0">
                            <div v-for="(item, index) in bannerPicture" class="sola-flex" :key="index">
                                <img  :src="item" />
                                <span class="delete" @click="delPicture(index,item,1)"><i class="el-alert__icon el-icon-error"></i></span>
                            </div>
                        </div>
                        <div class="sola-file-box" v-if="bannerPicture.length<5">
                            <el-button type="primary" plain>上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
                            <input class="btn-file" type="file" @change="uploadBanner"/>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="门店地址选择">
                  <div class="city-select">
                    <v-distpicker  @province="onProvince" @city="onCity" @area="onArea"></v-distpicker>
                  </div>
                </el-form-item>
                <el-form-item label="街道地址" style="width:400px">
                    <el-input v-model="store.address" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="经度获取方式" style="width:400px">
                    示例：腾讯地图 坐标器 （提示：经纬度的,标点符号是分割线；标点前面是经度，后面是维度，请复制经纬度数字进来，不要带上,标点符号）<a href="http://lbs.qq.com/tool/getpoint/index.html"  target="_blank">跳转查看</a>
                    <img src="http://appimg.yinsoso.com/backend/TIM%E6%88%AA%E5%9B%BE20190320134958.png" width="1000px;">
                </el-form-item>
                <el-form-item label="经度" style="width:400px">
                    <el-input rows="10" v-model="store.longitude" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="纬度" style="width:400px">
                    <el-input v-model="store.lantitude" style="width:400px"></el-input>
                </el-form-item>

                <el-form-item label="门店详情图：">
                    <div class="sola-upload clearfix">
                        <div class="sola-left clearfix" v-show="detailPicture.length>0">
                            <div v-for="(item, index) in detailPicture" class="sola-flex" :key="index">
                                <img  :src="item" />
                                <span class="delete" @click="delPicture(index,item,2)"><i class="el-alert__icon el-icon-error"></i></span>
                            </div>

                        </div>
                        <div class="sola-file-box">
                            <el-button type="primary" plain>上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
                            <input class="btn-file" type="file" accept="image/*" @change="uploadDetail"/>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确认添加门店</el-button>
                </el-form-item>
            </el-form>

        </div>
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import VDistpicker from 'v-distpicker'
export default {
      name:'addStore',
    components:{
        VDistpicker
    },
    data (){
        return{
          accept: 'image/gif, image/jpeg, image/png, image/jpg', //图片上传类型
          bannerPicture:[], // 门店主图
          delVisible: false,
          detailPicture: [], // 门店详情图
          select:{province: '', city: '', area: '' }, //省市区
          cities: 0,
          blocks: 0,
          selectCity:[],
          store:{
              name:'', // 门店名称
              longitude: '', // 门店经纬度
              lantitude: '', // 门店经纬度
              address: '', // 门店街道地址
              telephone:'',//门店电话
          },
      }
    },
    watch: {
    
    },

    methods:{
        //选择省市区
        onSelected(data){
            // console.log("省市区")
            // console.log(data)
            if(data.province.value&&data.province.value!=undefined){
                this.select.province = data.province.value;
            }
            if(data.city.value&&data.city.value!=undefined){
                this.select.city = data.city.value;
            }
            if(data.area.value&&data.area.value!=undefined){
                this.select.area = data.area.value;
            }
            
        },
        // //选择省份
        onProvince(data){
            //console.log("选择省份")
            //console.log(data)
            //this.select.province =data;
            if(data.value&&data.value!=undefined){
                this.select.province = data.value;
                this.select.city=""; 
                this.select.area=""; 
            }
        },
        onCity(data){
            //console.log("选择城市")
            //console.log(data)
            if(data.value&&data.value!=undefined){
                this.select.city = data.value;
                this.select.area="";
            }
        },
        onArea(data){
            //console.log("选择地区")
            //console.log(data)
            if(data.value&&data.value!=undefined){
                this.select.area = data.value;
            }
        },
      // 触发上传门店主图
      uploadBanner(event){
          var _event = event;
          var _this = this;
          let reader = new FileReader();
          let img1 = event.target.files[0];
          let type = img1.type;//文件的类型，判断是否是图片
          let size = img1.size;//文件的大小，判断图片的大小
          const files = event.target;
          if(this.accept.indexOf(type) == -1){
              this.$message({
                  message: '请选择gif,jpeg,png,jpg格式图片上传',
                  type: 'warning'
              });
              return false;
          }else if(size>3145728){
              this.$message({
                  message: '请选择3M以内的图片上传',
                  type: 'warning'
              });
              return false;

          }else if (typeof(FileReader) === 'undefined') {
              this.$notify.error({
                  title: '错误',
                  message: '抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！'
              });

          }else {
                let reader = new FileReader();
                reader.readAsDataURL(img1);
                reader.onload = function(e) {
                    var base = this.result;
                    //console.log(base);
                    //_this.$NProgress.start();
                    const querystring = require('querystring');
                    const param ={
                        base64:base
                    }
                    _this.$axios.post('/api/common/upload/base64',querystring.stringify(param)).then(response=>{
                      //console.log(response);
                      if(response.data.code==200){
                          _this.$message({
                              message: '恭喜你，图片上传成功',
                              type: 'success'
                          });
                          _this.bannerPicture.push(response.data.data);

                      }else{
                          _this.$notify.error({
                              title: '上传图片失败',
                              duration:2000,
                              message: '失败原因：'+ response.data.msg
                          });
                      }

                  }).catch(error=>{
                      console.log(error);
                  });
                }

          }
      },
      // 触发上传门店详情图
      uploadDetail(event){
          var _event = event;
          var _this = this;
          let reader = new FileReader();
          let img1 = event.target.files[0];
          let type = img1.type;//文件的类型，判断是否是图片
          let size = img1.size;//文件的大小，判断图片的大小
          const files = event.target;
          if(this.accept.indexOf(type) == -1){
              this.$message({
                  message: '请选择gif,jpeg,png,jpg格式图片上传',
                  type: 'warning'
              });
              return false;
          }else if(size>3145728){
              this.$message({
                  message: '请选择3M以内的图片上传',
                  type: 'warning'
              });
              return false;
          }else if (typeof(FileReader) === 'undefined') {
              this.$notify.error({
                  title: '错误',
                  message: '抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！'
              });

          }else {
              let reader = new FileReader();
                reader.readAsDataURL(img1);
                reader.onload = function(e) {
                    var base = this.result;
                    //console.log(base);
                    //_this.$NProgress.start();
                    const querystring = require('querystring');
                    const param ={
                        base64:base
                    }
                    _this.$axios.post('/api/common/upload/base64',querystring.stringify(param)).then(response=>{
                      //console.log(response);
                      if(response.data.code==200){
                          _this.$message({
                              message: '恭喜你，图片上传成功',
                              type: 'success'
                          });
                          _this.detailPicture.push(response.data.data);

                      }else{
                          _this.$notify.error({
                              title: '上传图片失败',
                              duration:2000,
                              message: '失败原因：'+ response.data.msg
                          });
                      }

                  }).catch(error=>{
                      console.log(error);
                  });

                }

          }
      },
      // 删除图片
      delPicture(index, row,typeId){
          //当前记录的下标
          this.idx = index;
          this.typeId = typeId;
          this.delVisible = true;
      },
      deleteRow(){
          if(this.typeId == 1){
              //门店主图
              this.bannerPicture.splice(this.idx,1);
          }else if(this.typeId == 2){
              //门店详情图
              this.detailPicture.splice(this.idx,1);
          }
          this.$message.success('删除成功');
          this.delVisible = false;
      },
        onSubmit (){
            // console.log(this.selectedProvince.name)
            if(this.store.name==""){
                this.$message.error('请输入门店名称');
                return false;
            }
            if(this.store.telephone ==""){
                this.$message.error('请输入门店电话');
                return false;
            }
            else if(this.bannerPicture.length<1){
                this.$message.error('请上传门店封面图，至少一张');
                return false;
            }
            else if(this.select.province==""||this.select.province==undefined){
                this.$message.error('请选择省份');
                return false;
            }
            else if(this.select.city==""){
                this.$message.error('请选择城市');
                return false;
            }
            else if(this.select.area==""){
                this.$message.error('请选择地区');
                return false;
            }
            else if(this.store.address==""){
                this.$message.error('请输入门店街道地址');
                return false;
            }
            else if(this.store.longitude==""){
                this.$message.error('请输入经度');
                return false;
            }
            else if(this.store.lantitude==""){
                this.$message.error('请输入门纬度');
                return false;
            }
            else if(this.detailPicture<1){
                this.$message.error('请上传门店详情图，至少一张');
                return false;
            }
            else{
              const param =
              {
                name:this.store.name,
                telephone:this.store.telephone, //门店电话
                province:this.select.province,
                city:this.select.city,
                district: this.select.area,
                address: this.store.address,
                longitude: this.store.longitude,
                latitude: this.store.lantitude,
                bannerImg: JSON.stringify(this.bannerPicture),
                detail: JSON.stringify(this.detailPicture),
              }
             this.addStore(param);
            }
          },
          addStore (param){
              var _this = this
              const querystring = require('querystring');
              this.$axios.post('/manage/store/add',querystring.stringify(param)).then(response=>{
                  //console.log(response);
                  console.log(querystring.stringify(param))
                  if(response.data.code==200){
                      this.$message({
                          message: '门店添加成功',
                          type: 'success'
                      });
                      this.uploadImg1 = []
                      this.uploadImg2 = []
                      setTimeout(function(){
                        console.log("jump jump")
                        _this.$router.push({path:"/store"})
                      },1500);

                  }
                  else{
                    console.log(response.data.code)
                      this.$notify.error({
                          title: '添加失败',
                          duration:2000,
                          message: '失败原因：'+response.data.msg
                      });
                  }

              }).catch(error=>{
                  console.log(error);
                  this.$notify.error({
                    title: '添加失败',
                    duration:2000,
                    message: '异常！请检查门店信息填写是否正确'
                });
              });
          },
      },
  }
</script>
<style lang="stylus" scoped>
.el-form-item .el-cascader{
    width :400px;
}
.el-cascader-menus .el-cascader-menu{
    width :240px
}
.sola-upload{
    .sola-left{
        width :100%;
        height :auto;
        .sola-flex{
            float:left
            width: 360px;
            height: 180px;
            margin-bottom 20px;
            margin-right:15px;
            position:relative;
            .delete{
                position:absolute;
                top:2px;
                right:13px;
                color: #f56c6c;
                display:inline-block;
                padding:5px 5px;
                .el-alert__icon{font-size:28px;cursor:pointer}
            }
            img {
                width:100%;
                height:100%;
            }
        }
    }
    .sola-file-box{
        position:relative;
        .btn-file{
            position:absolute;
            top:0;
            left:0;
            z-index 1;
            opacity:0;
            width :120px;
            height :40px;
            outline: 0;
            background-color :none;
            cursor:pointer;
        }
    }

}
</style>
